<template>
  <div>
    <div class="table-head">
      <slot name="head"></slot>
    </div>
    <el-table
      :data="tableData"
      :border="tableInfo.border"
      style="width: 100%"
      v-if="cols.length"
    >
      <el-table-column
        v-for="(col, i) in cols"
        :key="i"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
      >
        <template v-if="col.slot" v-slot="{row}">
          <slot :name="col.slot" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PressureTestTable",
  data() {
    return {};
  },
  props: {
    //table的设置
    tableInfo: {
      type: Object,
      default: () => {
        return { border: false, width: "180" };
      },
    },
    //表头的信息
    cols: {
      type: Array,
      default: () => [],
    },
    //数据
    tableData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.table-head {
  padding: 16px 12px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ebeef5;
  border-bottom: none;
  background-color: #f2f2f2;
}
.el-table {
  ::v-deep th {
    background-color: #f2f2f2;
  }
}
.el-table {
  ::v-deep td,
  ::v-deep th {
    border-color: #e6e6e6;
  }
}
</style>